<template>
  <q-page class="q-pa-md wrapBox">
    <div v-loading="loading">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-image src="/svgs/modelApplication.svg" style="width: 17px;margin: 0 10px 0 0" fit />
          <el-breadcrumb-item>{{ $t('modelService') }}</el-breadcrumb-item>
          <el-breadcrumb-item><span style=" color: #333;">{{ $t('modelApplication') }}</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="datasetBox" style="position: relative">
        <div class="contentBox_title">
          <span>{{ $t('modelApplication') }}</span>
        </div>
        <div class="contentBox">
          <div class="searchWrap" style="margin-top: 10px">
            <div>
              <el-input v-model.trim="searchName" placeholder="搜索模型名称或说明" spellcheck="false">
                <template #prepend>
                  <el-select v-model="typeValue" placeholder="请选择模型状态" style="width: 150px;background-color: #fff">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                      @click="filterDataset" />
                  </el-select>
                </template>
                <template #append>
                  <el-button :icon="Search" @click="filterDataset" />
                </template>
              </el-input>
            </div>
            <div>
              <el-button type="primary" size="default" @click="toCreatePage">{{ $t('createModel') }}</el-button>
            </div>
          </div>
          <el-table ref="tableList" :data="filterTableData" row-key="id" style="margin-top: 15px" :header-cell-style="{
            background: '#f9f9f9',
            color: '#333',
            fontWeight: '500',
            fontSize: '14px',
            textAlign: 'left',
            height: '56px'
          }" :expand-row-keys="expandRows" @expand-change="handleExpandChange">
            <TransitionGroup name="el-fade-in-linear">
              <el-table-column align="left" width="40" type="expand">
                <template v-slot="props">
                  <el-table :data="filterSubTableData" style="width: 100%;font-size: 14px;" :header-cell-style="{
                    background: '#f9f9f9',
                    color: '#333',
                    fontWeight: '500',
                    fontSize: '14px',
                    textAlign: 'left',
                    height: '56px'
                  }">
                    <el-table-column align="center" prop="" label="" width="40px" />
                    <el-table-column align="left" prop="version_number" label="版本号" width="240">
                      <template #default="scope">
                        <el-button link type="primary" size="small" @click="toModelVersion(scope.row, props.row)">{{
                          scope.row.version_number }}</el-button>
                      </template>
                    </el-table-column>
                    <el-table-column align="left" prop="dockerStatus" label="状态" width="150" />
                    <el-table-column align="left" prop="create_at" label="创建时间" width="200" />
                    <el-table-column align="left" prop="description" label="版本说明" width="200" />
                    <el-table-column align="left" prop="labels" label="操作">
                      <template #default="scope">
                        <el-button
                          v-show="(scope.row.dockerStatus !== '构建中' && scope.row.dockerStatus !== '构建失败' && scope.row.dockerStatus !== '初始化') ? userStatus ? true : scope.row.creator_username == userInfoName ? true : false : false"
                          link type="primary" size="small" @click="toModelDevelopMent">部署</el-button>
                        <el-button
                          v-show="(scope.row.dockerStatus !== '构建中' && scope.row.dockerStatus !== '构建失败' && scope.row.dockerStatus !== '初始化') ? userStatus ? true : scope.row.creator_username == userInfoName ? true : false : false"
                          link type="primary" size="small" @click="toModelVersion(scope.row, props.row)">评估报告</el-button>
                        <el-button v-show="userStatus ? true : scope.row.creator_username == userInfoName ? true : false"
                          link type="primary" size="small"
                          @click="deleteModelVersionHandle(scope.row, scope.$index)">删除</el-button>
                        <el-button
                          v-show="(scope.row.dockerStatus !== '构建中' && scope.row.dockerStatus !== '构建失败' && scope.row.dockerStatus !== '初始化') ? userStatus ? true : scope.row.creator_username == userInfoName ? true : false : false"
                          link type="primary" size="small"
                          @click.stop="mirrorAddressDialog(scope.row, $event)">镜像地址</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
            </TransitionGroup>
            <el-table-column align="left" prop="title" label="模型名称">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="toDataSetDetail(scope.row)" style="font-size: 14px">{{
                  scope.row.title }}</el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="latest_version_number" label="最新版本" width="150">
              <template #default="scope">
                <span>{{ scope.row.latest_version_number ? scope.row.latest_version_number : "-" }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="create_at" label="创建时间" width="200" />
            <el-table-column align="left" prop="versions_count" label="版本数量" width="200" />
            <el-table-column align="left" prop="description" label="描述" width="180">
              <template #default="scope">
                <span>{{ scope.row.description ? scope.row.description : "-" }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="labels" label="操作">
              <template #default="scope">
                <el-button v-show="userStatus ? true : scope.row.creator_username == userInfoName" link type="primary"
                  size="small" @click="addVersion(scope.row, $event)">新增版本</el-button>
                <el-button v-show="userStatus ? true : scope.row.creator_username == userInfoName" link type="primary"
                  size="small" @click="deleteModelFun(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="row" style="justify-content: end;margin: 20px 0;" v-if="filterTableData.length > 0">
          <el-pagination background layout="total, prev, pager, next" :total="10" />
        </div>
      </div>
    </div>
    <el-dialog v-model="deleteModelDialog" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{ }">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <el-icon style="font-size: 20px; color: #FFA940">
              <WarningFilled />
            </el-icon>
            <span style="margin-left: 10px;color: #FFA940;font-weight: bold">删除提醒</span>
          </div>
        </div>
      </template>
      <div style="margin: 0 0 0 50px;padding: 0">
        <p>确定删除本模型的所有版本吗?</p>
        <p>删除后不可恢复,请谨慎操作！</p>
      </div>
      <div style="display: flex;justify-content: flex-end;padding-bottom: 10px">
        <el-button type="primary" @click="deleteModelDialog = false">放弃删除</el-button>
        <el-button @click="emitDeleteCreateModel" style="background-color: #fff">继续删除</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="deleteModelVersionDialog" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{ }">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <el-icon style="font-size: 20px; color: #FFA940">
              <WarningFilled />
            </el-icon>
            <span style="margin-left: 10px;color: #FFA940;font-weight: bold">删除提醒</span>
          </div>
        </div>
      </template>
      <div style="margin: 0 0 0 50px;">
        <p style="letter-spacing:2px;">确定删除本模型的{{ modelVersionInfo.version_number }}版本吗?</p>
        <p style="letter-spacing:2px;">删除后不可恢复,请谨慎操作！</p>
      </div>
      <div style="display: flex;justify-content: flex-end;padding: 10px 0">
        <el-button type="primary" @click="deleteModelVersionDialog = false">放弃删除</el-button>
        <el-button @click="emitDeleteModelVersion">确认删除</el-button>
      </div>
    </el-dialog>
    <!--镜像弹框-->
    <el-dialog v-model="mirrorAddressDialogShow" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{ }">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <span style="margin-left: 10px;color: #1D1D1D;font-weight: bold">镜像地址</span>
          </div>
        </div>
      </template>
      <div style="display: flex; padding-left: 60px;align-items: center;margin-top: 20px">
        镜像地址: <el-input disabled="false" style="width: 80%;margin-left: 10px" v-model="mirrorAddressValue"
          spellcheck="false"></el-input>
      </div>
      <div
        style="display: flex;width: 100%;padding: 0;margin-top: 40px;border-top: 1px solid rgb(234,234,234);padding: 5px 0">
        <div
          style="flex: 1;text-align: center;line-height: 30px;cursor: pointer;border-right: 1px solid rgb(234, 234, 234)"
          @click="mirrorAddressDialogShow = false">返回</div>
        <div style="flex: 1;text-align: center;line-height: 30px;color: rgb(58,141,255);cursor: pointer"
          @click="copyButton">复制</div>
      </div>
    </el-dialog>

    <!--创建模型版本 start-->
    <el-dialog v-model="createModelDialogShow" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{ }">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <span style="
            margin-left: 10px;color: #1D1D1D;font-weight: bold;letter-spacing: 1px">{{ $t('createModel') }}</span>
          </div>
        </div>
      </template>
      <el-form ref="createModelFormRef" :model="createModelForm" :rules="createModelRules" label-width="140px"
        class="demo-ruleForm" status-icon>
        <el-form-item label="模型名称：" prop="title">
          <el-input v-model.trim="createModelForm.title" style="font-size: 14px" placeholder="请选择模型名称" maxlength="25"
            show-word-limit />
        </el-form-item>
        <el-form-item label="版本：" prop="version_number">
          <el-input v-model="createModelForm.version_number" placeholder="例: 0.0.1" />
        </el-form-item>
        <el-form-item label="描述：">
          <el-input type="textarea" :rows="3" v-model="createModelForm.description" />
        </el-form-item>
        <!-- <el-form-item label="模型来源：" prop="dataset_type">
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="modelData">训练作业</el-radio-button>
            <el-radio-button label="userData">自定义上传</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item v-if="showModelStore.model_operator == 0 && tabPosition == 'modelData'" label="选择算法："
          prop="modelId">
          <el-select v-model.trim="createModelForm.modelId" placeholder="请选择算法">
            <el-option v-for="item in allAlg" :key="item.title" :label="item.title" :value="item.id" @click="chooseAlg" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showModelStore.model_operator == 0 && tabPosition == 'modelData'" label="选择训练作业:"
          prop="model_run_id">
          <el-select v-model="createModelForm.model_run_id" placeholder="请选择训练任务">
            <el-option v-for="item in modelRunsData" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showModelStore.model_operator > 0 && tabPosition == 'modelData'" label="选择训练作业:">{{
          showModelStore.model_operator
        }}</el-form-item>
        <el-form-item v-if="tabPosition == 'userData'" label="镜像：" >
          <el-input type="textarea" :rows="3" v-model="createModelForm.gitFileData" placeholder="请输入镜像地址或将镜像文件拖入"/>
        </el-form-item>
        <el-form-item v-if="tabPosition == 'userData'" label="数据类型：">
          <el-select v-model="createModelForm.dataType" placeholder="请选择类型">
            <el-option label="json数据" value="json"></el-option>
            <el-option label="文件" value="file"></el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex;width: 100%;border-top: 1px solid rgb(234,234,234);padding: 5px 0">
          <div
            style="flex: 1;text-align: center;line-height: 30px;cursor: pointer;margin-bottom: 0;border-right: 1px solid rgb(234, 234, 234)"
            @click="resetForm(createModelFormRef)">{{ $t('cancle') }}</div>
          <div
            style="flex: 1;text-align: center;line-height: 30px;color: rgb(58,141,255);cursor: pointer;margin-bottom: 0"
            @click="submitForm(createModelFormRef)">{{ $t('completeCreation') }}</div>
        </div>
      </el-form>
    </el-dialog>

    <!--新增模型版本 start-->
    <el-dialog v-model="addVersionDialogShow" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{ }">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <span style="margin-left: 10px;color: #1D1D1D;font-weight: bold;letter-spacing: 1px">新增模型版本</span>
          </div>
        </div>
      </template>
      <el-form ref="addVersionFormRef" :model="addVersionForm" :rules="addVersionRules" label-width="140px"
        class="demo-ruleForm" status-icon>
        <el-form-item label="模型名称:">
          <p style="margin: 0">{{ ModelDetailInfo.title }}</p>
        </el-form-item>
        <el-form-item label="最新版本:">
          <p style="margin: 0">{{ ModelDetailInfo.latest_version_number }}</p>
        </el-form-item>
        <el-form-item label="请输入当前版本:" prop="version_number">
          <el-input v-model="addVersionForm.version_number"
            :placeholder="Number(ModelDetailInfo.latest_version_number) + 1" />
        </el-form-item>
        <el-form-item label="描述:" prop="description">
          <el-input type="textarea" :rows="3" v-model="addVersionForm.description" />
        </el-form-item>
        <el-form-item label="选择算法:" prop="description">
          <p style="margin: 0">{{ ModelDetailInfo.model_title }}</p>
        </el-form-item>
        <el-form-item label="选择训练作业：" prop="model_run_id">
          <el-select v-model.trim="addVersionForm.model_run_id" placeholder="请选择训练作业" prop="model_run_id">
            <el-option v-for="item in modelRunsData" :key="item.title" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <div style="display: flex;width: 100%;border-top: 1px solid rgb(234,234,234);padding: 5px 0">
          <div
            style="flex: 1;text-align: center;line-height: 30px;cursor: pointer;margin-bottom: 0;border-right: 1px solid rgb(234, 234, 234)"
            @click="cancelAddVersion(addVersionFormRef)">取消</div>
          <div
            style="flex: 1;text-align: center;line-height: 30px;color: rgb(58,141,255);cursor: pointer;margin-bottom: 0"
            @click="addModel(addVersionFormRef)">完成创建</div>
        </div>
      </el-form>
    </el-dialog>

  </q-page>
</template>


<script setup lang="ts">
import { reactive, ref, computed, toRaw, shallowRef, onMounted, watch } from "vue";
import { useRouter } from 'vue-router';
import {
  getCreateModelAppList,
  deleteCreateModel,
  getModelVersionsList,
  deleteModelVersion,
  getCreateModelDetail,
  addModelVersion,
  getAlgAllList,
  getModelAboutRuns,
  createModelApp,
  validateModelName
} from 'src/api/model'
import { modelStore } from 'src/stores/model';
import { Search } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { dataSetStore } from 'src/stores/dataSet';
const store = dataSetStore()
const addVersionFormRef = ref<FormInstance>()
const router = useRouter()
const showModelStore = modelStore()
const projectId = router.currentRoute.value.params.project_id
const loading = ref(false)
const searchName = ref('')
const typeValue = ref('')
const deleteModelDialog = ref(false)
let modelListItem = ref({});
import { ElMessage } from 'element-plus';
import useClipboard from "vue-clipboard3";
let expandRows = reactive([]);
const tableList = ref();
const createModelFormRef = ref();
let mirrorAddressDialogShow = ref(false);
let mirrorAddressValue = ref('');
let addVersionDialogShow = ref(false);
const tabPosition = ref('modelData')
const options = [
  {
    value: 'all',
    label: '全部',
  },
  {
    value: 'building',
    label: '构建中',
  },
  {
    value: 'available',
    label: '构建成功',
  },
  {
    value: 'fail',
    label: '构建失败',
  },
  {
    value: 'initial',
    label: '初始化',
  }
]
let labelAssignData = ref(
  {
    count: 0,
    next: null,
    previous: null,
    results: []
  }
)

const tableData = ref([])

const repository_model_id = ref(0);
const userStatus = JSON.parse(localStorage.getItem('user') || "{}").status;//判断用户是否是项目创建人或项目管理员
const userInfoName = localStorage.getItem('username')//获取用户登录的用户名


let createModelDialogShow = ref(false);
function toCreatePage() {
  createModelDialogShow.value = true;
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  createModelDialogShow.value = false;
  // router.push({ name: 'model-app', params: { project_id: projectId } })
}
const createModelForm = reactive({
  title: '',
  description: '',
  version_number: '1',
  modelId: '',
  model_run_id: '',
  dataType: 'json',
  gitFileData:''
})
const validateTitle = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('模型名称不能为空'))
    return
  }
  let params = {
    title: createModelForm.title
  }
  validateModelName(projectId, params).then(res => {
    if (res.data.exists) {
      callback(new Error('模型名称重复'))
    }
    callback()
  }).catch(err => {
    callback(new Error('校验接口报错'))
  })
}
const createModelRules = reactive<FormRules>({
  title: [
    { required: true, validator: validateTitle, trigger: 'blur' }
  ],
  version_number: [
    { required: true, message: '请输入版本号', trigger: 'blur' }
  ],
  modelId: [
    { required: true, message: '请选择算法', trigger: 'blur' },
  ],
  model_run_id: [
    { required: true, message: '请选择训练作业', trigger: 'blur' },
  ],
})
//存放获取所有的算法
const allAlg = shallowRef([
  {
    title: '',
    id: ''
  }
])

//存放获取所有的训练任务
const modelRunsData = shallowRef([])
onMounted(() => {
  if (store.quickStart.quickFlow) {
    store.setQuickStart({
      tipsPopup: true,
      quickFlow: true,
      flowNumber: store.quickStart.flowNumber
    })
  }
})
// 监听快速入门点击新建按钮
watch(() => store.quickStart, (newEl, oldEl) => {
  if (!newEl.tipsPopup && newEl.quickFlow) {
    toCreatePage()
  }
})

AlgAllList();//获取所有的算法
function AlgAllList() {
  getAlgAllList(projectId).then((res: any) => {
    allAlg.value = Object.assign(res.data)
  }).catch(error => {
    console.log(error)
  }).finally(() => {
    if (showModelStore.model_operator > 0) {
      toCreatePage()
    }
  })
}

//获取算法对应下的训练任务
function chooseAlg() {
  loading.value = true;
  getModelAboutRuns(projectId, createModelForm.modelId).then((res: any) => {
    loading.value = false;
    modelRunsData.value = res.data.filter((items: any) => items.status === 'success');
  }).finally(() => {
    loading.value = false;
  }).catch(error => {
    console.log(error)
  })
};

//点击创建模型
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = Object.assign(createModelForm);
      let operatorObj = {
        title: params.title,
        version_number: params.version_number,
        description: params.description,
        operator_instance_id: showModelStore.model_operator
      }
      createModelApp(projectId, showModelStore.model_operator > 0 ? operatorObj : params).then((res: any) => {
        ElMessage.success(`创建模型成功！`);
        createModelDialogShow.value = false;
        if (store.quickStart.quickFlow) {
          router.push({ name: 'model-deploy', params: { project_id: projectId } })
        } else {
          getModelAppList();
        }
      }).finally(() => {
        loading.value = false;
        formEl.resetFields();
      }).catch((error: any) => {
        ElMessage.success(`模型创建失败,提示${error.data}！`)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
function handleExpandChange(row: any, rows: any) {
  if (rows.length > 1) {
    tableList.value.toggleRowExpansion(rows[0])
  }
  repository_model_id.value = toRaw(row.id);
  const isExpend = rows.some((r: any) => r.id === row.id) // 判断当前行展开状态
  if (isExpend) {
    getModelVersionsList(projectId, repository_model_id.value).then((res: any) => {
      // let newArray = tableData.value.concat(res.data);
      // tableData.value = noRepeat(newArray);
      res.data.forEach((item: any) => {
        item.dockerStatus = dockerStatusChage(item.docker_image_status);
      })
      tableData.value = res.data;
    }).catch((error: any) => {
      ElMessage.success("数据列表请求失败！！！")
    })
  } else {
    return
  }
}
function dockerStatusChage(dockerStatus: any) {
  switch (dockerStatus) {
    case 'building':
      return '构建中';
    case 'available':
      return '构建成功';
    case 'fail':
      return '构建失败';
    case 'initial':
      return '初始化';
  }
}
//数组去重
function noRepeat(arr: any) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i].id == arr[j].id && i != j) {
        arr.splice(j, 1);
      }
    }
  }
  return arr;
}
getModelAppList();
const filterTableData = computed(() =>
  labelAssignData.value.results.filter(
    (data: any) =>
      !searchName.value ||
      data.title.toLowerCase().includes(searchName.value.toLowerCase())
  )
)
const filterSubTableData = computed(() =>
  tableData.value.filter(
    (data: any) =>
      !searchName.value ||
      data.description.indexOf(searchName.value) != -1
  )
)

//按钮权限
function getModelAppList() {
  loading.value = true;
  getCreateModelAppList(projectId).then((res: any) => {
    loading.value = false;
    res.data.results.forEach((items: any) => {
      items.children = [];
      items.hasChildren = true;
    })
    labelAssignData.value = res.data;
  })
}
function deleteModelFun(row: any) {
  deleteModelDialog.value = true
  modelListItem.value = toRaw(row)
}
function toDataSetDetail(row: any) {
  const id = toRaw(row.id)
  showModelStore.setRepositoryModelId(id);
  router.push({ name: 'model-app-detail', params: { project_id: projectId } })
}
function toModelVersion(row: any, prow: any) {
  showModelStore.setRepositoryModelId(toRaw(prow.id));
  showModelStore.setVersionId(toRaw(row.id))
  router.push({ name: 'assessment-report', params: { project_id: projectId } })
}


function getModelDetail(repository_model_id: any) {
  getCreateModelDetail(projectId, repository_model_id).then((res: any) => {
    // const model_id = res.data.model_id
    ModelDetailInfo.value = res.data;
    getModelAboutRuns(projectId, res.data.model_id).then((res: any) => {
      loading.value = false;
      modelRunsData.value = res.data.filter((items: any) => items.status === 'success');
    }).finally(() => {
      loading.value = false;
    }).catch(error => {
      console.log(error)
    })
    // getModelSource(projectId,model_id).then( (res:any) => {
    //   ModelSource.value = res.data.filter( (items:any) => items.status === 'success' );
    //   console.log('ModelSource',ModelSource)
    // })
  })
}
let ModelDetailInfo = ref({})
const addVersionForm = reactive({
  title: '',
  version_number: '',
  description: '',
  model_run_id: ''
});
const addVersionRules = reactive({
  version_number: [
    { required: true, message: '请输入当前版本号', trigger: 'change' },
  ],
  model_run_id: [
    { required: true, message: '训练作业不能为空', trigger: 'blur' }
  ]
});
function addVersion(row: any, e: any) {
  tableList.value.toggleRowExpansion(row, true)
  addVersionDialogShow.value = true;
  getModelDetail(row.id);
}
const cancelAddVersion = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  addVersionDialogShow.value = false;
}
const addModel = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const model_idData = ModelDetailInfo.value.id;
      let params = ref({
        title: ModelDetailInfo.value.title,
        version_number: addVersionForm.version_number,
        description: addVersionForm.description,
        model_run_id: addVersionForm.model_run_id
      })
      addModelVersion(projectId, model_idData, params.value).then((res: any) => {
        ElMessage.success("版本创建成功！");
        addVersionDialogShow.value = false;
        formEl.resetFields();
        getModelAppList();
      })
    }
  })
}
//删除创建的模型
function emitDeleteCreateModel() {
  const id = toRaw(modelListItem.value.id)
  deleteCreateModel(projectId, id).then((res: any) => {
    ElMessage.success("删除成功！！！")
    deleteModelDialog.value = false;
    getModelAppList();
  })
}
//跳转模型部署界面
const toModelDevelopMent = () => {
  router.push({ name: 'model-deployment', params: { project_id: projectId } })
}


//删除模型版本
const modelVersionInfo = ref({})
let indexs = ref(0)
function deleteModelVersionHandle(row: any, index: any) {
  indexs.value = index;
  modelVersionInfo.value = toRaw(row)
  deleteModelVersionDialog.value = true
}
let deleteModelVersionDialog = ref(false)
function emitDeleteModelVersion() {
  deleteModelVersion(projectId, repository_model_id.value, modelVersionInfo.value.id).then((res: any) => {
    ElMessage.success(`成功删除模型版本！！！`)
    deleteModelVersionDialog.value = false;
    tableData.value.splice(indexs.value, 1);
  })
}
//镜像地址弹框
function mirrorAddressDialog(row: any, event: any) {
  event.stopPropagation();
  mirrorAddressValue.value = row.docker_image_address
  mirrorAddressDialogShow.value = true;
}
// 复制镜像地址
const { toClipboard } = useClipboard()
const copyButton = async () => {
  try {
    await toClipboard(mirrorAddressValue.value)
    ElMessage({
      message: '数据集链接已复制',
      type: 'success',
    })
  } catch (e) {
    console.error(e)
  }
}
</script>

<style scoped lang="scss">
.wrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }

  .datasetBox {
    margin: 0 20px;

    .contentBox_title {
      position: relative;
      display: flex;
      align-items: center;
      color: var(--title);
      font-weight: 500;
      font-size: 16px;
      padding: 15px 15px;
      border-bottom: 1px solid #e5e6eb;
      background-color: #ffffff !important;

      .icon {
        position: absolute;
        left: 90px;
        top: 22px;
        width: 17px;
      }

      .text {
        position: absolute;
        left: 104px;
        top: 19px;
        font-size: 12px;
        color: #3d5ce4;
        font-weight: 400;
        cursor: pointer;
      }
    }

    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;

      .searchWrap {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

//输入框placeholder样式
::v-deep .el-input__inner {
  &::placeholder {
    color: #ccc;
    font-size: 14px;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #ccc;
    font-size: 14px;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #ccc;
    font-size: 14px;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #ccc;
    font-size: 14px;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #ccc;
    font-size: 14px;
  }
}

//点击下拉框，去掉输入框蓝色高亮显示
:deep(.el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: var(--el-border-color);
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: var(--el-border-color);
  --el-input-focus-border-color: var(--el-border-color);
  --el-input-clear-hover-color: var(--el-border-color);
}

::v-deep .el-form-item--default .el-form-item__label {
  color: #1d1d1d;
  letter-spacing: 1px;
}

::v-deep .el-dialog__body {
  padding-top: 15px;
  padding-bottom: 0;
}

::v-deep .el-dialog__header {
  padding: 10px 0 0 10px;
  margin: 0;
  border-bottom: 1px solid rgb(234, 234, 234);

  div {
    margin-bottom: 5px;
  }
}

::v-deep .el-table_expand-icon {
  visibility: hidden;
}
</style>
